<template>
  <view>
    <!-- 查看详情 -->
    <view v-if="type == 1">
      <uni-card title="客户信息">
        <view>客户名称：<span>{{ information.name }}</span></view>
        <view>手机号码：<span>{{ information.mobile }}</span></view>
        <view>认证状态：
          <uni-tag text="已认证" type="success" v-if="information.isCertify == 1"/>
          <uni-tag text="未认证" type="warning" v-else/>
        </view>
        <view>邮箱：<span v-if="information.email != null">{{ information.email }}</span><span v-else>--</span></view>
        <view>备注：<span v-if="information.remark != null">{{ information.remark }}</span><span v-else>--</span></view>
        <view>变更时间：<span v-if="information.updateTime != null">{{ information.updateTime }}</span><span v-else>--</span>
        </view>
        <view>创建时间：<span>{{ information.createTime }}</span></view>
        <view>黑名单：
          <uni-tag text="是" type="warning" v-if="information.status == 1"/>
          <uni-tag text="否" type="success" v-else/>
        </view>
        <view>所属企业：<span>{{ information.companyName }}</span></view>
      </uni-card>
    </view>

    <!-- 修改 -->
    <view class="change_form" v-else>
      <uni-forms ref="ruleForm" :modelValue="ruleForm" :rules="rules" label-width="160rpx" type="line"
                 label-align="right">
        <uni-forms-item label="所属企业" name="customerCompanyId" :required="true" class="paddingAll">
          <uni-data-select v-model="ruleForm.customerCompanyId" :localdata="customerCompanyList" :clear="false"
                           placeholder="请选择所属企业"></uni-data-select>
        </uni-forms-item>
        <uni-forms-item label="姓名" name="name" :required="true" class="paddingAll">
          <uni-easyinput v-model="ruleForm.name" type="text" placeholder="请输入姓名" :clearable="false"
                         :disabled="ruleForm.isCertify == 1"/>
        </uni-forms-item>
        <uni-forms-item label="手机号码" name="mobile" :required="true" class="paddingAll">
          <uni-easyinput v-model="ruleForm.mobile" type="text" placeholder="请输入手机号码" :clearable="false"
                         :disabled="ruleForm.isCertify == 1"/>
        </uni-forms-item>
        <uni-forms-item label="邮箱" name="email" :required="false" class="paddingAll">
          <uni-easyinput v-model="ruleForm.email" type="text" placeholder="请输入邮箱" :clearable="false"/>
        </uni-forms-item>
        <uni-forms-item label="备注" name="remark" :required="false" class="paddingAll">
          <uni-easyinput v-model="ruleForm.remark" type="textarea" placeholder="点击添加备注,最多200字!" :clearable="false"/>
        </uni-forms-item>
      </uni-forms>

      <view class="submit_btn">
        <button size="mini" class="back-Btn" @click="cancel">取消</button>
        <button size="mini" class="next-Btn" @click="submit">确定</button>
      </view>

    </view>
  </view>
</template>

<script>
import {addCustomerCompanyStaff, updateCustomerCompanyStaff} from "@/api/ec/person/customer/customerCompanyStaff";
import {selectListCustomerCompany} from "@/api/ec/person/customer/customerCompany";
import {getQueryObject} from "@/utils";

export default {
  data() {
    return {
      information: '',
      urlQuery: getQueryObject(window.location.href),
      type: '', //0修改 1查看
      customerCompanyList: [],
      // 表单参数
      ruleForm: {},
      // 表单校验
      rules: {
        customerCompanyId: [
          {required: true, message: "请选择所属企业", trigger: "blur"}
        ],
        name: [
          {required: true, message: "请输入姓名", trigger: "blur"},
          {min: 2, max: 30, message: '姓名称长度需要在2-30个汉字或字符之间，不能包含特殊字符', trigger: 'blur'},
        ],
        mobile: [
          {required: true, message: "请输入手机号码", trigger: "blur"},
          {pattern: /^1[3456789]\d{9}$/, message: "请输入手机号码", trigger: "blur"}
        ],
        email: [
          {type: "email", message: "请输入邮箱账号", trigger: "blur"},
          {pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/, message: "请输入正确的邮箱账号", trigger: "blur"}
        ],
      },
    }
  },
  onLoad(option) {
    if (option.item) {
      this.information = JSON.parse(option.item)
      this.ruleForm = this.information
      // 所属企业
      this.customerCompanyList = [{text: this.information.name, value: this.information.id}]
      this.type = option.type
    }
    /** 查询企业客户列表 */
    this.getCustomerCompanyList()
  },
  methods: {
    /** 查询企业客户列表 */
    getCustomerCompanyList() {
      selectListCustomerCompany().then(response => {
        var list = []
        for (var i = 0; i < response.data.length; i++) {
          var object = {};
          object.text = response.data[i].name; // 展示text
          object.value = response.data[i].id; // 用id查询
          list.push(object);
        }
        this.customerCompanyList = list;
        if (this.urlQuery != null && this.urlQuery.customerCompanyId != null) {
          this.queryParams.customerCompanyId = parseInt(this.urlQuery.customerCompanyId);
        }
      });
    },
    cancel() {
      uni.navigateBack({
        delta: 1
      })
    },
    /** 修改 */
    submit() {
      this.$refs.ruleForm.validate().then(res => {
        if (this.ruleForm.id != null) {
          updateCustomerCompanyStaff(this.ruleForm).then(response => {
            this.$modal.msgSuccess("修改成功");
            uni.$emit('refreshData');
            uni.navigateBack({
              delta: 1
            })
          });
        } else {
          addCustomerCompanyStaff(this.ruleForm).then(response => {
            this.$modal.msgSuccess("新增成功");
            uni.$emit('refreshData');
            uni.navigateBack({
              delta: 1
            })
          });
        }
      });
    },
  }
}
</script>

<style scoped lang="scss">
::v-deep .uni-input-input:disabled {
  color: #666666;
}

.submit_btn {
  display: flex;
  margin-top: 260rpx;

  button {
    width: 40%;
    font-size: 28rpx;
  }

  .next-Btn {
    background-color: $uni-color-primary;
    border-radius: 10rpx;
    color: #fff;
  }

  .back-Btn {
    border-radius: 10rpx;
    border: solid 1rpx $uni-color-primary;
    color: $uni-color-primary;
    background: #fff;
  }

}

::v-deep .uni-forms-item {
  margin-bottom: 26rpx;
}

.paddingAll {
  padding: 0 30rpx 0 10rpx;
}

.change_form {
  padding: 30rpx 0 20rpx 0;
  position: relative;
}

::v-deep .uni-tag--success {
  background-color: #f0f9eb;
  border-color: #e1f3d8;
  color: #67c23a;
}

::v-deep .uni-tag--warning {
  background-color: #ffeded;
  border-color: #ffdbdb;
  color: #ff4949;
}

::v-deep .uni-collapse-item__title-box {
  background: #fff;
  padding: 0;
}

::v-deep .uniui-bottom {
  color: #ccc !important;
}

page {
  background: $uni-bg-color;
}

view {
  margin-bottom: 16rpx;
}

span {
  font-weight: 600;
}
</style>
